<!--
 * @Author: caozaihui 15908754730@163.com
 * @Date: 2024-06-14 00:47:40
 * @LastEditors: czh 2119294696@qq.com
 * @LastEditTime: 2024-07-03 12:37:37
 * @FilePath: \YMU_forum_vue\src\components\article\ArticleCardFull.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 文章卡片 -->
<script setup>
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';
const props = defineProps({
  author: {
    type: Number,
    required: true
  },
  articleList: {
    type: Array,
    default: () => []
  }
});

const router = useRouter();

const jumpDetailsPage = (aid) => {
  console.log('跳转');
  if (props.author == 1) {
    router.push({
      path: '/article/auart',
      query: {
        aid: aid
      }
    })
  } else {
    router.push({
      path: '/article',
      query: {
        aid: aid
      }
    })
  }
}

</script>

<template>
  <div class="body" v-for="article in articleList" @click="jumpDetailsPage(article.aid)">
    <el-row :gutter="10">
      <el-col :xs="8" :lg="6">
        <img :src="article.uavator" style="height: 32px;width: 32px;margin-right:15px;" />
        <span style="color: white">{{ article.author }}</span>
      </el-col>
      <el-col :xs="8" :lg="8">
        <el-text class="time">{{ article.updateTime }}</el-text>
      </el-col>
      <el-col :xs="8" :lg="10">
        <el-text style="margin-right: 10px;color: white">分类:</el-text>
        <el-tag class="tag">{{ article.type }}</el-tag>
      </el-col>
    </el-row>
    <div style="height: 10px;"></div>
    <div class="border-box">
      <el-card class="box-card">
        <el-row>
          <el-col :span="24">
            <el-text class="title">
              <div>{{ article.title }}</div>
            </el-text>
            <div style="margin-top: 10px;"><el-text class="text">{{ article.description }}</el-text></div>
            <div style="height: 15px;"></div>
            <el-row :gutter="10">
              <el-col :span="3">
                <div class="icon"><i class="iconfont icon-dianzan"></i>{{ article.likeCount }}</div>
              </el-col>
              <el-col :span="3">
                <div class="icon"><i class="iconfont icon-browse"></i>{{ article.pageView }}</div>
              </el-col>
              <el-col :span="4">  
                <div class="icon"><i class="iconfont icon-pinglun"></i>评论</div>
              </el-col>
              <el-col :xm="4" :lg="2">
                <el-text style="margin-left: 15px;">tags:</el-text>
              </el-col>
              <el-col :span="10">
                <el-tag class="tag" v-for="tag in article.tags">{{ tag.name }}</el-tag>
              </el-col>
            </el-row>
          </el-col>
          <el-col>
            <div>
              <img :src="article.coverImg" style="height: 120px;border-radius: 7px;" />
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

  </div>
</template>

<style scoped>
/* 边框动画 */
.border-box {
  background: yellowgreen;
  height: 250px;
}

.border-box {
  position: relative;
  margin: auto;
  overflow: hidden;
}

.border-box::after {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  right: 3px;
  left: 3px;
  line-height: 92px;
  font-size: 24px;
  /* background: #fff; */
  border: 2px solid yellowgreen;
  cursor: pointer;
  color: yellowgreen;
}

.border-box::before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: -20px;
  left: 0px;
  background: #fff;
  transform: rotateZ(-90deg) translate(-100%, -100%);
  transform-origin: top left;
  transition: transform 0.3s;
  transition-timing-function: linear;
}

.border-box:hover {
  filter: contrast(1.2);
}

.border-box:hover::before {
  transform: rotateZ(0deg) translate(0%, 0%);
}

.border-box:nth-child(2) {
  overflow: unset;
}

.border-box:nth-child(2)::after {
  content: "";
}

.border-box:nth-child(1):hover~div:nth-child(2)::before {
  transform: rotateZ(0deg) translate(0%, 0%);
}

@media screen and (max-width: 768px) {
  .title {
    font-size: 5vw !important
  }

  .time {
    font-size: 3vw;
  }
}
.time{
  color: white
}
.body {
  margin-top: 10px;
  margin-bottom: 5px;
}


.title {
  font-size: 20px;
  font-weight: bolder;
}

.text {
  font-size: 14px;
}

.tag {
  margin-right: 5px;
}

.icon {
  font-size: 13px;
}

.box-card {
  border-radius: 10px;
  position: relative;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  left: 4px;
  right: 4px;
  top: 4px;
  bottom: 4px;
  /* background-color: transparent; */
  box-sizing: border-box;
}
</style>
